<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <div class="flex justify-end">
                <el-button type="primary" @click="addSignal">添加频道</el-button>
                <el-button type="success" @click="asyncList">同步频道</el-button>
            </div>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <el-table
                size="large"
                :data="pager.lists"
                @selection-change="handleSelectionChange"
                style="width: 100%"
            >
<!--                <el-table-column type="selection" width="60" />-->
                <el-table-column label="频道ID" prop="channel_id" min-width="100" />
                <el-table-column label="频道名称" prop="name" min-width="150" />
                <el-table-column label="频道封面" min-width="100">
                    <template #default="{ row }">
                        <div class="flex items-center">
                            <div>
                                <el-avatar :src="row.cover" style="height: 60px; min-width: 60px"/>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="频道描述" prop="introduction" min-width="200" />
                <el-table-column sortable label="创建时间" prop="created_at" min-width="120" />
                <el-table-column sortable label="更新时间" prop="updated_at" min-width="120" />
                <el-table-column label="操作面板" min-width="160" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="editFun(row)">
                            编辑
                        </el-button>
                        <el-button
                                type="danger"
                                link
                                @click="handleDelete(row)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
    </div>
</template>

<script lang="ts" setup>
    import { usePaging } from '@/hooks/usePaging'
    import { getChannelListMz, synChannel, delChannel } from '@/api/live'
    import feedback from '@/utils/feedback'
    import { getRoutePath } from '@/router'
    import {ref, reactive} from "vue";
    import EditPopup from './edit.vue'

    const queryParams = reactive({
    });


    //分页处理
    const { pager, getLists, resetPage, resetParams } = usePaging({
        fetchFun: getChannelListMz,
        params: queryParams
    });

    const optionsData: Array<Object> = [
        {
            name: '未开播',
            id: 1
        },
        {
            name: '直播中',
            id: 2
        },
        {
            name: '已结束',
            id: 3
        },
    ];

    getLists();

    // 复选
    const handleSelectionChange = (val: any[]) => {};

    // 同步
    const asyncList = async () => {
        await synChannel();
        await getLists()
    };

    const editRef = shallowRef<InstanceType<typeof EditPopup>>();
    const showEdit = ref(false);

    // 添加
    const addSignal = async () => {
        showEdit.value = true;
        await nextTick();
        editRef.value?.open('add')
    };

    // 编辑
    const editFun = async (res:any) => {
        showEdit.value = true;
        await nextTick();
        editRef.value?.open('edit', res.channel_id);
        editRef.value?.getDetail()
    };

    // 删除
    const handleDelete = async (res:any) => {
        await feedback.confirm('确定删除该频道？');
        await delChannel({channel_id: res.channel_id});
        getLists()
    }

</script>

<style lang="scss" scope>
    .ls-input {
        width: 280px;
    }
    .test {
        test2 {
            border: 1px yellow solid;
        }
    }
</style>
